<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建调查问卷</title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
	</head>
	<style>
		.el-row {
			margin-top: 10px;
		}

		* {
			text-align: center;
		}

		body {
			background-color: skyblue;
		}
	</style>
	<body>
		<div id="app" style="text-align: center;">
			<el-row :gutter="20">
				<el-col :span="12" :offset="6">
					<!-- 问卷名称 -->
					<el-form :label-position="labelPosition" label-width="40px" :model="surveyForm" :rules="surveyRule"
						:ref="surveyForm" @submit.native.prevent>
						<el-form-item prop="title">
							<h1>创建调查问卷</h1>
							<el-input v-model="surveyForm.title" autocomplete="off" placeholder="请在此输入调查问卷的标题"
								style="width: 640px;margin-left: 40px;">
							</el-input>
						</el-form-item>
					</el-form>
					<!-- 问题表单内容 -->
					<el-form label-width="80px" ref="surveyForm" :rules="surveyRule" :model="surveyForm">
						<div v-for="(item,index) in surveyForm.question" :key="index" style="margin-left: 200px;">
							<!-- 问题输入框 -->
							<el-form-item label="问题内容" :prop="'question.'+index+'.qtitle'">
								<el-row style="width:500px;" :gutter="10">
									<el-col :span="18" style="width:350px;">
										<el-input type="textarea" v-model="item.qtitle" placeholder="请输入问题内容">
										</el-input>
									</el-col>
									<el-col :span="2">
										<el-button size="mini" @click="deleteQuestion(index)" type="info"
											icon="el-icon-delete" circle>
										</el-button>
									</el-col>
								</el-row>
							</el-form-item>
							<!-- 选项输入框 -->
							<el-form-item v-for="(op,i) in item.options" :key="i" :label="options[i]"
								:prop="'question.'+index+'.options.'+i+'.value'">
								<el-row :gutter="20">
									<el-col :span="20" style="width:300px;">
										<el-input type="text" v-model="op.value" placeholder="请输入选项内容"></el-input>
									</el-col>
									<el-col :span="4" style="width:50px">
										<el-button size="mini" type="danger" icon="el-icon-minus"
											@click="deleteOption(item.options,i)" circle></el-button>
									</el-col>
									<el-col :span="4" style="width:50px" v-if="i===item.options.length-1">
										<el-button style="display: inline-block;" size="mini"
											@click="addOption(item.options,i)" type="primary" icon="el-icon-plus"
											circle>
										</el-button>
									</el-col>
								</el-row>
							</el-form-item>
						</div>
					</el-form>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="14" :offset="14" :pull="1">
					<el-button type="primary" @click="addQuestion">添加题目</el-button>
					<el-button type="primary" @click="giveUp">放弃该问卷</el-button>
					<el-button type="primary" @click="sucess">生成问卷</el-button>
				</el-col>
			</el-row>
			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
				<span>确定要放弃当前问卷吗！！！！</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="suredialogVisible">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<script>
			new Vue({
				el: "#app",
				data() {
					var validatePass = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('问卷标题不能为空'));
						} else {
							axios.post("/questionnaire/isExist", {
								title: value
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								transformRequest: function(data) {
									return Qs.stringify(data);
								}
							}).then(function(res) {
								var data = res.data;
								if (data.success) {
									callback();
								} else {
									callback(new Error('活动标题已经存在,请重新输入'));
								}
							});
						}
					};
					var checkQtitle = (rule, value, callback) => {
						if (value === '') {
							return callback(new Error('问题内容不能为空'));
						} else {
							callback();
						}
					};
					var checkOption = (rule, value, callback) => {
						if (value === '') {
							return callback(new Error('选项内容不能为空'));
						} else {
							callback();
						}
					};
					return {
						labelPosition: 'top',
						surveyForm: {
							title: "",
							question: [{
								qtitle: '',
								options: [{
									value: ''
								}, {
									value: ''
								}]
							}]
						},
						surveyRule: {
							title: [{
								validator: validatePass,
								trigger: 'blur'
							}],
							question: [{
								qtitle: [{
									required: true,
									validator: checkQtitle,
									trigger: 'blur'
								}],
								options: [{
									value: [{
										validator: checkOption,
										trigger: 'blur'
									}]
								}, {
									value: [{
										validator: checkOption,
										trigger: 'blur'
									}]
								}]
							}]
						},
						options: ["A", "B", "C", "D", "E"],
						dialogVisible: false

					}
				},
				methods: {
					// 添加题目
					addQuestion() {
						console.log(this.surveyForm.question.length)
						if (this.surveyForm.question.length < 10) {
							console.log('添加题目')
							this.surveyForm.question.push({
								qtitle: '',
								options: [{
									value: ''
								}, {
									value: ''
								}]
							})
							console.log('添加表单验证')
							this.surveyRule.question.push({
								qtitle: [{
									required: true,
									validator: this.checkQtitle,
									message: '问题内容不能为空',
									trigger: 'blur'
								}],
								options: [{
									value: [{
										validator: this.checkOption,
										message: '选项内容不能为空',
										trigger: 'blur'
									}]
								}, {
									value: [{
										validator: this.checkOption,
										message: '选项内容不能为空',
										trigger: 'blur'
									}]
								}]
							})
						} else {
							this.$message({
								type: 'warning',
								message: '题目数量不可以超过10个'
							});
						}
					},
					// 增加问题选项
					addOption(options, i) {
						//先判断选项的数量
						if (options.length < 5) {
							options.push({
								value: ''
							});
						} else {
							this.$message({
								type: 'warning',
								message: '选择题最多有5个选项'
							});
						}
					},
					// 删除问题选项
					deleteOption(options, i) {
						//先判断选项数量
						if (options.length > 2) {
							options.splice(i, 1);
						} else {
							this.$message({
								type: 'warning',
								message: '选择题必须至少有2个选项'
							});
						}
					},
					// 删除该问题
					deleteQuestion(index) {
						this.surveyForm.question.splice(index, 1);
					},
					// 判断是否放弃该问卷
					giveUp() {
						let _this = this;
						_this.dialogVisible = true;
					},
					//确定放弃了当前的问卷
					suredialogVisible() {
						let _this = this;
						_this.dialogVisible = false;
						location.href = "main.html"
					},
					sucess() {
						var _this = this;
						//先校验，校验通过再提交
						_this.$refs.surveyForm.validate((valid) => {
							if (!valid) {
								console.log("表单校验未通过");
							} else {
								console.log(JSON.stringify(_this.surveyForm));
								axios.post("/questionnaire/create", {
									title: _this.surveyForm.title,
									question: _this.surveyForm.question
								}).then(function(res) {
									var data = res.data;
									if (data.success) {
										alert("创建成功")
										location.href = "main.html";
									} else {
										alert(data.errMsg);
									}
								});
							}
						});
					},
					//加载用户数据
					loaduser() {
						let _this = this;
						axios.get("/users/loginUser").then(function(res) {
							let result = res.data;
							console.log(result);
							if (result.success) {
								console.log("登陆成功")
							} else {
								alert(result.errMsg);
								location.href = "login.html";
							}
						});
					}
				},
				mounted() {
					let _this = this;
					_this.loaduser();
				}
			})
		</script>
	</body>
</html>
